<template>
  <div
    class="project-statistics-container animate__animated"
    :class="[visible ? 'animate__fadeIn' : 'animate__fadeOut']"
  >
    <div class="card-container">
      <a-row :gutter="20">
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="4">
          <div class="statistics-card">
            <div class="icon"></div>
            <div class="score">
              <div class="total">
                {{ dataSource.totalScore }}<span>分</span>
              </div>
              <div class="tip">总综合评分</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="4">
          <div class="statistics-card">
            <div class="icon"></div>
            <div class="score">
              <div class="total">{{ dataSource.ownScore }}<span>分</span></div>
              <div class="tip">项目考核自评分</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="4">
          <div class="statistics-card">
            <div class="icon"></div>
            <div class="score">
              <div class="total">{{ dataSource.score }}<span>分</span></div>
              <div class="tip">项目考核总分</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="4">
          <div class="statistics-card">
            <div class="icon"></div>
            <div class="score">
              <div class="total">{{ projectInfo.startDate }}</div>
              <div class="tip">计划开工时间</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="4">
          <div class="statistics-card">
            <div class="icon"></div>
            <div class="score">
              <div class="total">{{ projectInfo.endDate }}</div>
              <div class="tip">计划交工时间</div>
            </div>
          </div>
        </a-col>
        <a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="12" :xxl="4">
          <div class="statistics-card">
            <div class="icon"></div>
            <div class="score">
              <div class="total">
                {{ projectInfo.proStatusDesc }}
              </div>
              <div class="tip">项目状态</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
    <div class="chart-bar-dom">
      <div class="title">一级指标评分<span>（分）</span></div>
      <div class="bar-chart" ref="bar-chart"></div>
    </div>
    <div class="bottom-container">
      <a-row :gutter="20">
        <a-col
          :xs="24"
          :sm="24"
          :md="24"
          :lg="24"
          :xl="12"
          :xxl="6"
          v-for="(item, index) in tableData"
          :key="index"
        >
          <div class="data-card">
            <div class="title">{{ item.orgName }}<span>（个/分）</span></div>
            <div class="body">
              <div class="chart-gauge" :ref="'chart_' + index"></div>
              <div class="number-container">
                <div class="left-tip">
                  <div class="name">完成指标项数/总数</div>
                  <div class="total">
                    {{ item.completeCount
                    }}<span>/{{ item.totalCount }} 个</span>
                  </div>
                </div>
                <div class="right-tip">
                  <div class="name">上传文件数</div>
                  <div class="total">
                    {{ item.fileCount || 0 }} <span>个</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import echarts from "echarts";
import {
  getProjectStaticTotal,
  getProjectStaticOrg,
} from "@/api/qualityEngineering";
export default {
  props: {
    visible: {
      type: Boolean,
      default: true,
    },
    treeItem: {
      type: Object,
      default: () => {
        return {};
      },
    },
    dataType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      dataSource: {},
      projectInfo: {},
      tableData: [],
      barInstance: null,
      chartInstance: {},
    };
  },
  mounted() {
    this.getData();
  },
  methods: {
    getData() {
      Promise.all([this.getTotalData(), this.getOrgData()]);
    },
    getTotalData() {
      return new Promise((resolve, reject) => {
        let { orgCode } = this.treeItem;
        getProjectStaticTotal({ tenantCode: orgCode })
          .then((res) => {
            this.dataSource = res?.data ?? {};
            this.projectInfo = this.dataSource.projectInfo ?? {};
            this.$nextTick(() => {
              this.drawBarChart();
            });

            resolve();
          })
          .catch((_) => {
            this.projectInfo = {};
            this.dataSource = {};
            reject();
          });
      });
    },
    getOrgData() {
      return new Promise((resolve, reject) => {
        let { orgCode } = this.treeItem;
        getProjectStaticOrg({ tenantCode: orgCode })
          .then((res) => {
            this.tableData = res?.data ?? [];
            this.tableData.forEach((item, index) => {
              this.$nextTick((_) => {
                setTimeout((_) => {
                  this.drawPieChar("chart_" + index, item);
                }, 300);
              });
            });
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            reject();
          });
      });
    },

    //绘制柱状图
    drawBarChart() {
      let { firstList = [] } = this.dataSource;
      let x = [],
        y1 = [],
        y2 = [],
        y3 = [];
      firstList.forEach((item) => {
        x.push(item.name);
        y1.push(item.totalScore);
        y2.push(item.ownScore);
        y3.push(item.score);
      });
      let chart_dom = this.$refs["bar-chart"];
      this.barInstance && this.barInstance.dispose();
      this.barInstance = echarts.init(chart_dom);
      let baseOpt = {
        color: ["#1677FF", "#FFA95A", "#00C1B6"],
        legend: {
          icon: "rect",
          itemHeight: 14,
          itemWidth: 19,
          itemGap: 20,
          top: 10,
          right: 50,
          textStyle: {
            color: "#525A5D",
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
            label: {
              backgroundColor: "#ffffff",
            },
          },
        },
        grid: {
          left: 50,
          right: 50,
          bottom: 60,
          top: 60,
        },
        xAxis: {
          type: "category",
          data: x || [],
          type: "category",
          boundaryGap: true,
          axisLabel: {
            color: "#999999",
            fontSize: "14",
            margin: 20,
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: "#D9D9D9",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            color: "#999999",
            fontSize: "14",
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
        },
        series: [
          {
            name: "考核总分",
            data: y1 || [],
            type: "bar",
            barWidth: 20,
            barGap: "60%",
            label: {
              show: true,
              position: "top",
              textStyle: {
                fontSize: 14,
                color: "#5599FE",
              },
            },
          },
          {
            name: "考核自评分",
            data: y2 || [],
            type: "bar",
            barWidth: 20,
            barGap: "60%",
            label: {
              show: true,
              position: "top",
              textStyle: {
                fontSize: 14,
                color: "#5BD0A6",
              },
            },
          },
          {
            name: "考核总评分",
            data: y3 || [],
            type: "bar",
            barWidth: 20,
            barGap: "60%",
            label: {
              show: true,
              position: "top",
              textStyle: {
                fontSize: 14,
                color: "#5BD0A6",
              },
            },
          },
        ],
      };
      this.barInstance.setOption(baseOpt);
      //开启响应式
      window.addEventListener("resize", () => {
        this.barInstance.resize();
      });
      //监听click
      //   this.barInstance.on("click", (params) => {
      //     let { seriesType, dataIndex } = params;
      //     if (seriesType != "bar") {
      //       return;
      //     }
      //     this.gotoDetail(2, x1?.[dataIndex] || "");
      //   });
    },

    //绘制环形图
    drawPieChar(refName, data = {}) {
      if (!refName) {
        return;
      }
      let value = Number(data.score) / data.totalScore / 100;
      let chart_dom = this.$refs[refName];
      this.chartInstance[refName] && this.chartInstance[refName].dispose();
      let instance = echarts.init(chart_dom[0]);
      this.chartInstance[refName] = instance;
      let baseOpt = {
        title: {
          text: "分",
          left: "center",
          top: "62%",
          textStyle: {
            fontSize: 14,
            fontWeight: 400,
            color: "#8C8C8C",
          },
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            type: "gauge",
            startAngle: 180,
            endAngle: 0,
            radius: "100%",
            center: ["50%", "62%"],
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            pointer: {
              show: false,
            },
            min: 0,
            max: data.totalScore,
            axisLabel: {
              color: "#8C8C8C",
              show: true,
              padding: [20, 0, 0, -10],
              fontSize: 14,
              distance: 10,
              formatter(value) {
                if (value === 0 || value === data.totalScore) {
                  return value;
                }
              },
            },
            detail: {
              offsetCenter: [0, -50],
              textStyle: {
                fontSize: 36,
                fontWeight: 400,
                color: "#333333",
              },
              formatter: function(value) {
                return value;
              },
            },
            itemStyle: {
              normal: {
                color: "#323232",
              },
            },
            axisLine: {
              lineStyle: {
                width: 24,
                color: [
                  [
                    value,
                    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {
                        offset: 0,
                        color: "#174AFF",
                      },
                      {
                        offset: 0.7,
                        color: "#17ABFF",
                      },
                    ]),
                  ],
                  [1, "#E8F2FF"],
                ],
              },
            },
            data: [
              {
                name: "",
                value: data?.score ?? 0,
              },
            ],
          },
        ],
      };
      instance.setOption(baseOpt);
      //开启响应式
      window.addEventListener("resize", () => {
        instance.resize();
      });
    },
  },
  destroyed() {
    this.mapInstance && this.mapInstance.destroy();
  },
};
</script>

<style lang="less" scoped>
.project-statistics-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  overflow-x: hidden !important;
  .card-container {
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 20px 0 0 0;
    .statistics-card {
      background: @base-bg-color;
      height: 140px;
      border-radius: 6px 6px 6px 6px;
      margin-bottom: 20px;
      display: flex;
      align-items: center;
      .icon {
        width: 72px;
        height: 72px;
        margin: 0 20px;
      }
      .score {
        .total {
          font-size: 24px;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;
          span {
            padding-left: 10px;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.8);
          }
        }
        .tip {
          color: rgba(255, 255, 255, 0.8);
          font-size: 14px;
          font-family: Microsoft YaHei, Microsoft YaHei;
          font-weight: 400;
        }
      }
    }
    /deep/.ant-row {
      :nth-child(1) {
        .statistics-card {
          background: linear-gradient(90deg, #1677ff 0%, #4391ff 100%);
          .icon {
            background: url(https://jszhgd.cn/static/pc/quality-engineering-app/card_icon_1.png);
            background-size: 100% 100%;
          }
        }
      }
      :nth-child(2) {
        .statistics-card {
          background: linear-gradient(90deg, #5f4ae1 0%, #a480f1 100%);
          .icon {
            background: url(https://jszhgd.cn/static/pc/quality-engineering-app/card_icon_2.png);
            background-size: 100% 100%;
          }
        }
      }
      :nth-child(3) {
        .statistics-card {
          background: linear-gradient(90deg, #00c1b6 0%, #36d8ce 100%);
          .icon {
            background: url(https://jszhgd.cn/static/pc/quality-engineering-app/card_icon_3.png);
            background-size: 100% 100%;
          }
        }
      }
      :nth-child(4) {
        .statistics-card {
          background: linear-gradient(90deg, #f38250 0%, #fba782 100%);
          .icon {
            background: url(https://jszhgd.cn/static/pc/quality-engineering-app/card_icon_8.png);
            background-size: 100% 100%;
          }
        }
      }
      :nth-child(5) {
        .statistics-card {
          background: linear-gradient(90deg, #19addc 0%, #3acbf9 100%);
          .icon {
            background: url(https://jszhgd.cn/static/pc/quality-engineering-app/card_icon_9.png);
            background-size: 100% 100%;
          }
        }
      }
      :nth-child(6) {
        .statistics-card {
          background: linear-gradient(90deg, #41d14a 0%, #6deb75 100%);
          .icon {
            background: url(https://jszhgd.cn/static/pc/quality-engineering-app/card_icon_10.png);
            background-size: 100% 100%;
          }
        }
      }
    }
  }
  .title {
    display: flex;
    align-items: center;
    padding: 0 24px;
    height: 56px;
    font-size: 18px;
    flex-shrink: 0;
    border-bottom: 1px solid @border-color;
    span {
      color: #999da5;
      font-size: 14px;
      margin-left: 6px;
    }
  }
  .chart-bar-dom {
    height: 326px;
    flex-shrink: 0;
    background: @base-bg-color;
    border-radius: 6px 6px 6px 6px;
    display: flex;
    flex-direction: column;
    .bar-chart {
      flex: 1;
    }
  }
  .bottom-container {
    flex: 1;
    box-sizing: border-box;
    padding: 20px 0 0 0;
    .data-card {
      height: 356px;
      background: @base-bg-color;
      border-radius: 6px 6px 6px 6px;
      margin-bottom: 20px;
      display: flex;
      flex-direction: column;
      .body {
        flex: 1;
        position: relative;
        .chart-gauge {
          position: absolute;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
        }
      }
      .number-container {
        position: absolute;
        bottom: 10px;
        left: 0;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0 24px;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        margin-bottom: 10px;
        .name {
          font-size: 14px;
          color: #666666;
          position: relative;
          padding-left: 18px;
          &::after {
            content: "";
            width: 12px;
            height: 12px;
            border-radius: 0px 0px 0px 0px;
            position: absolute;
            top: 5px;
            left: 0;
          }
        }
        .total {
          font-size: 24px;
          span {
            font-size: 14px;
            color: #666666;
          }
        }
        .left-tip {
          .name {
            &::after {
              background: #239b53;
            }
          }
          .total {
            color: #239b53;
          }
        }
        .right-tip {
          .name {
            &::after {
              background: #f07f17;
            }
          }
          .total {
            color: #f07f17;
          }
        }
      }
    }
  }
}
</style>
